@charset "utf-8";
@import "reset";
@import "common";

.main{
    width: 1280px;
    margin: 0 auto;
     background-color: #f6f6f6;
    .backimage{
        img{
            display: block;
        }
    }

    .content{
        padding: 0px 152px 302px 153px;
        .title-top{
            padding: 21px 0px 33px 9px;
            p{
              font-size: 14px;
              color: #535353;
              line-height: 14px;
            }
        }
        .title-bottom{
            @include fiex-between;
            width: 970px;
            margin-left: 5px;
            div{
               background-color: #cac9c9;
               width: 220px;
               line-height: 24px;
               font-size: 24px;
               text-align: center;
               padding: 37px 0px 30px 0px;
               transition: all .3s;
               .p-img{
                   img{display: block;margin: 0 auto;} 
                   padding-top: 10px;    
                   opacity: 0;
               }
               &:hover{
                   width: 292px;
                   .p-img{opacity: 1;}
                    background-color: #2072f9;
                   
               }
            }    
        }

        .search{
            padding: 29px 0px 26px 0px;
            position: relative;
            input{
                width: 358px;
                line-height: 50px;
                height: 50px;
                padding-left: 7px;
                border-color: black;
            }
            .ico{
                position: absolute;
                right: 0px;
                top: 29px;
                width: 56px;
                text-align: center;
                line-height: 50px;
                height: 50px;
                i{ font-size: 33px;}
                background-color: #434343;
            }
        }

        .border-box{
            ul{
                border-top: 1px solid #d2d2d2 ;
                border-left:1px solid #d2d2d2 ;
                @include fiex-between;
                li{
                    img{
                        display: block;
                    }
                    background-color: white;
                    width: 326px; 
                    border-bottom: 1px solid #d2d2d2 ;  
                    border-right: 1px solid #d2d2d2 ;
                    .top{
                        text-align: left;
                        line-height: 18px;
                        font-size: 18px;
                        color: #2072F9;
                    }
                    .bottom-f{
                        font-size: 12px;
                        line-height: 12px;
                        color:#3E3E3E ;
                        padding: 19px 0px 35px 17px;
                    }                                      
                }
              
            }
            .first{
                li{
                    &:nth-child(1) {
                        img{ padding: 18px 0px 0px 75px;}
                        .top{padding: 11px 0px 0px 106px;}
                       
                    }
                    &:nth-child(2) {
                        img{padding:28px 0px 0px 96px ;}
                        .top{padding: 15px 0px 0px 116px;}
                    }
                    &:nth-child(3) {
                        img{padding: 45px 0px 0px 118px;}
                        .top{padding: 25px 0px 0px 118px;}
                    }
                }
            }

            .second{
                li{
                    &:nth-child(1) {
                        img{padding: 24px 0px 0px 106px;}
                        .top{padding: 26px 0px 0px 102px;}
                    }
                    &:nth-child(2) {
                        img{padding:24px 0px 0px 115px ;}
                        .top{padding: 27px 0px 0px 110px;}
                    }
                    &:nth-child(3) {
                        img{padding: 29px 0px 0px 123px;}
                        .top{padding: 24px 0px 0px 120px;}
                    }
                }
            }
            .three{
                li{
                    &:nth-child(1) {
                        img {padding: 42px 0px 0px 108px;}
                        .top{padding: 19px 0px 0px 107px;}
                    }
                    &:nth-child(2) {
                        img{padding:35px 0px 0px 112px ;}
                        .top{padding: 22px 0px 0px 110px;}
                    }
                    &:nth-child(3) {
                        img{padding: 39px 0px 0px 115px;}
                        .top{padding: 22px 0px 0px 120px;}
                    }
                }
            }
        }
        .bottom{
            width: 528px;
            margin: 0 auto;
            padding: 54px 0px 0px 0px;
            @include fiex-between;
            div{
                font-size: 18px;
                line-height:48px ;
                color: #8D8C8C;
            }
            label{
               
                .num{
                    width: 60px;
                    text-align: center; 
                }
                position: relative; 
                input{
                    position: absolute;
                    top: 0px;
                    visibility: hidden;
                   
                } 
                & input:checked ~.num{
                    background-color:#2072F9 ;
                    color: white;
                } 
                   
            }
            .font , .back{
                width: 84px;
                height: 48px;
                text-align: left;
                &:hover{
                    border: 1px solid #2072F9;
                }   
             }
             .back{
                 text-align: right;   
                
             }
         
            
        }


    }
  
        
}

    
    
